<template>
<div v-wechat-title="$route.meta.title"></div>
    <Header />
    <div id="card">
        <el-card class="box-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span class="card-title">用户信息</span>
                </div>
            </template>
            
            <div v-if="userInfo" class="text item">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="2">
                        <span>昵称：</span>
                    </el-col>
                    <el-col :span="8">
                        <span>{{ userInfo.name }}</span>
                    </el-col>
                </el-row>
            </div>

            <div v-if="userInfo" class="text item">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="2">
                         <span>手机号：</span>
                    </el-col>
                    <el-col :span="8">
                         <span>{{ userInfo.telephone }}</span>
                    </el-col>
                </el-row>
            </div>

            <div v-if="userInfo" class="text item">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="2">
                        <span>个性签名：</span>
                    </el-col>
                    <el-col :span="12">
                        <span>{{userInfo.signature}}</span>
                        <span @click="update_user_signature(userInfo.id)" class="signature">
                            <el-icon><edit /></el-icon>
                        </span>
                    </el-col>
                </el-row>
            </div>
            
            <div v-if="userInfo" class="text item">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="2">
                        <span>用户权限：</span>
                    </el-col>
                    <el-col :span="8">
                        <span v-if="userInfo.level=='administrator'">超级管理员</span>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>


    <Footer />
</template>

<script>
import { mapState } from 'vuex';
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { Edit, List } from '@element-plus/icons';
import { ElMessageBox, ElMessage } from 'element-plus'
import userService from "@/service/userService";

export default {
    name: 'Profile',
    components: { 
        Header,
        Footer,
        Edit,
        List,
        },
    
    computed: mapState({
        userInfo: (state) => state.userModule.userInfo,
    }),
    methods: {
        update_user_signature(id){
            ElMessageBox.prompt('修改个性签名', 'Update', {
                confirmButtonText: '修改',
                cancelButtonText: '取消',
                type: 'warning',
                center: true,
                icon: Edit,
            }).then(({ value }) => {
                ElMessage({
                    type: 'success',
                    message: `修改成功，个性签名为:${value}，重新登录后更新`,
                }),
                userService.update_user_signature("user/signature/" + id,{
                    signature:value,
                })
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消修改',
                        })
                    })
            },
    }
};
</script>


<style scoped>

#card{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

.card-title{
    font-family: "Verdana";
    font-weight: 500;
    font-style: normal;
    color: black;
}
.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 0;
    right:0; 
    margin: auto;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
}
.signature {
    font-weight: 600;
    cursor: pointer;
    margin-left: 10px;
}
.signature:hover{
    color: lightskyblue;
}

</style>
